<template>
  <div v-show="props.compType === 'divider'">
    <!--   <el-form-item label="ID">
      <el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
        <el-input class="input" v-model="props.id" ></el-input>
      </el-tooltip>
    </el-form-item> -->
    <el-form-item label="文字">
      <el-input
        class="input"
        v-model="props.text"
        @input="inopuytext"
      ></el-input>
    </el-form-item>
    <el-form-item label="显示标题">
      <el-switch v-model="props.showTitle" @change="shotext"></el-switch>
    </el-form-item>
    <!-- <el-form-item label="字段宽度" labelWidth="70px">
        <el-radio-group v-model="props.span">
          <el-radio-button :label="6" :value="6">1/4</el-radio-button>
          <el-radio-button :label="8" :value="8">1/3</el-radio-button>
          <el-radio-button :label="12" :value="12">1/2</el-radio-button>
          <el-radio-button :label="24" :value="24">整列</el-radio-button>
        </el-radio-group>
      </el-form-item> -->
    <el-form-item label="标题位置">
      <el-radio-group v-model="props['content-position']">
        <el-radio-button label="left">左</el-radio-button>
        <el-radio-button label="center">中</el-radio-button>
        <el-radio-button label="right">右</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </div>
</template>
<script>
/**
 * input的配置项
 */
export default {
  name: "dividerConfig",
  props: {
    props: {},
  },
  data() {
    return {
      leabe: "",
    };
  },
  methods: {
    shotext(val) {
      if (!val) {
        this.leabe = JSON.parse(JSON.stringify(this.props.text));
        this.props.text = "";
        this.props.showTitle = false;
      } else {
        if (
          this.props.text === undefined ||
          !this.props.text ||
          this.props.text === ""
        ) {
          if (this.leabe) {
            this.props.text = this.leabe;
          } else {
            this.props.text = "标题";
          }
        }

        this.props.showTitle = true;
      }
    },
    inopuytext(val) {
      console.log(this.props);
      this.props.text = val;
    },
  },
  mounted() {
    
  },
};
</script>
